<template>
	<div class="SqlNetworkTraffic">
		<el-row class="SqlNetworkTraffic">
			<el-col :span="24" class="SqlNetworkTraffic-box">
				<!-- <div
                    id="NetworkTraffic" 
                    ref="NetworkTraffic" 
                    class="NetworkTraffic"
                    :class="{divHide: dataTotal == 0}">
                </div> -->
				<div ref="NetworkTraffic" v-loading="!dataTotal" element-loading-text="无可用数据"
					element-loading-spinner="el-icon-warning-outline" element-loading-background="rgba(0, 0, 0, 0.8)">
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import {
		fetchData
	} from '@/api/index.js';
	import bus from 'common/bus.js';

	export default {
		props: {
			allData: Object
		},
		data() {
			return {
				dataTotal: 0,
				receivedData: [],
				sentData: [],
				timeData: [],
				NetworkTraffic: {},
				EChartsOption: {
					title: {
						left: 'center',
						text: 'Mysql 网络流量'
					},
					grid: {
						left: 'center',
						top: 'middle',
						width: '95%',
						height: '80%',
						containLabel: true
					},
					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						type: 'category',
						data: this.timeData,
					},
					yAxis: {
						type: 'value'
					},
					dataZoom: [{
						type: 'inside',
						start: 0,
						end: 10
					}, {
						start: 0,
						end: 10,
						handleSize: '80%',
						handleStyle: {
							color: '#fff',
							shadowBlur: 3,
							shadowColor: 'rgba(0, 0, 0, 0.6)',
							shadowOffsetX: 2,
							shadowOffsetY: 2
						}
					}],
					series: [{
							name: "发送字节数",
							type: 'line',
							// showSymbol: false,
							data: this.receivedData,
						},
						{
							name: "接收字节数",
							type: 'line',
							// showSymbol: false,
							data: this.sentData,
						},

					]
				}
			}
		},
		created() {
			this.getTableData();
		},
		mounted() {
			this.NetworkTraffic = this.$echarts.init(this.$refs.NetworkTraffic);

			this.drawNetworkTraffic();

			window.onresize = () => {
				let myEchart = this.$echarts.init(this.$refs.NetworkTraffic);
				myEchart.resize();
			}

		},
		computed: {

		},
		methods: {
			getTableData() {

				this.dataTotal = this.allData.dataTotal;
				this.timeData = this.allData.TIME;
				this.receivedData = this.allData.RECEIVED;
				this.sentData = this.allData.SENT;
				this.$nextTick(function() {
					this.NetworkTraffic.setOption({
						xAxis: {
							data: this.timeData
						},
						series: [{
								type: 'line',
								data: this.receivedData
							},
							{
								type: 'line',
								data: this.sentData
							}
						]
					});
					this.NetworkTraffic.hideLoading();
				})
			},
			drawNetworkTraffic() {
				this.NetworkTraffic.setOption(this.EChartsOption);
			},
		},
		watch: {
			allData: {
				handler(newValue, oldValue) {
					this.allData = newValue;
					this.getTableData();
				},
				deep: true
			}
		}
	}
</script>
<style scoped>
	.noData {
		height: 100%;
		background: cornsilk;
	}

	.SqlNetworkTraffic {
		height: 100%;
		margin-bottom: 0 !important;
	}

	.SqlNetworkTraffic-box {
		height: 100%;
	}

	.SqlNetworkTraffic-box div {
		height: 100%;
	}

	.divHide {
		display: none;
	}

	.noDataBox {
		height: 100%;
		text-align: center;
	}

	.noDataBox::before {
		display: inline-block;
		content: "";
		height: 100%;
		vertical-align: middle;
	}

	.noDataBox span {
		font-size: xx-large;
	}
</style>
